<template>
    <div class="div">
        <div class="status">
            <el-col>
                <el-input placeholder="员工姓名" suffix-icon="el-icon-search" v-model="params.staffName" @change="load()"></el-input>
            </el-col>
        </div>
        <div style=" float: left; margin-top: 30px; margin-left:130px;">
            <h3>员工总人数:<span style="color:red">{{ staffcount }}</span></h3>
        </div>
        <div style="float: left; margin-left: 130px; margin-top: 30px; ">
            <el-row>
                <el-button style="padding: 10px 10px;border: 1px solid #0066ff;color: #0066ff;" @click="daoo">
                    导出
                </el-button>
            </el-row>
        </div>

        <staff :list="list" />
    </div>
</template>

<script>
import {export2Excel} from "../util"
import staff from '../page/staff.vue'
import axios from "axios";
export default {
    components: {
        staff
    },
    data() {
        return {
            columns:[
                {title:"员工工号",key:"staffnumber"},
                {title:"员工姓名",key:"staffName"},
                {title:"员工性别",key:"staffsex"},
                {title:"入职日期",key:"staffdate"},
                {title:"员工照片",key:"staffimg"},
                {title:"员工工资",key:"staffmoney"},
                {title:"员工年龄",key:"staffage"},
                {title:"员工身份证",key:"staffcard"},
              ],
            list: [], //获取表格列表数据
            params: {
                staffName: "",
            },
            staffcount:"",
        };
    },
    created() {
        this.load();
        this.staffcount()
    },
    methods: {

        daoo(){
             export2Excel(this.columns,this.list,"员工信息表")
        },
        load() {
            axios({
                url: "/api/staff/staffFindAll",
                method: "GET",
                params: this.params,
            }).then((res) => {
                console.log(res);
                this.list = res.data;
            });
        },
        staffcount() {
            axios({
                url: "/api/staff/staffcount",
                method: "GET",
               
            }).then((res) => {
                console.log(res);
                this.staffcount = res.data;
            });
        },
    },



}
</script>

<style scoped>
@import "../css/home.css";
.div {
    width: 100%;
    height: 100%;
    background-color: whitesmoke;
    position: relative;
}
.dd {
    width: 710px;
    height: 390px;
    background-color: white;
}
.status {
    float: left;
    margin-left: 130px;
    margin-top: 20px;
}
</style>